<template>
  <h1>{{ msg }}</h1>
  <button @click="setMsg">点击触发事件</button>
  <hr>
  <h1>{{ userName }}</h1>
  <button @click="getUserName">getUserName</button>
  <hr>
  <h1>{{ obj }}</h1>
  <button @click="setObj">设置obj</button>
  <hr>
  <h1>{{ arr }}</h1>
  <button @click="setArr('AAA')">点击设置数组</button>
</template>

<!-- 在script标签上 写入setup 就是 setup入口函数的语法糖  -->
<script setup>
import { ref } from 'vue';
// 1. ref 声明一个基本类型的响应式数据
// 2. 获取ref声明的响应式数据 必须使用属性value才可以
    let msg = ref("Hello wrold")
    const setMsg = ()=> { // 函数
      msg.value = msg.value.split('').reverse().join('')
      console.log(msg.value);
    }
// 2. 重新赋值--------------------------
    let userName = ref(null)
    const getUserName = ()=>{
      userName.value = '张三'
    }
// 3. ref可以不可以 创建一个引用类型的响应式数据呢?
    let obj = ref({
      name:"张三",
      age:18
    })
    const setObj = ()=>{
      obj.value.val = 100
      console.log(obj.value);
    }
// 4. 数组
    let arr = ref([1,2,3,4])
    const setArr = (msg)=>{
      arr.value.push(msg)
    }

</script>
